import React, { Component, Fragment } from 'react';
import { Card, Table, Button, Modal, Form, Select, DatePicker, Input, Radio,message } from 'antd';
import Iaxios from './../../axios';
//import Utils from './../../utils/utils';
//import ITable from '../../components/ETable';
import BaseForm from '../../components/BaseForm';
import moment from 'moment';

const FormItem  = Form.Item;
const TextArea = Input.TextArea;
const Option = Select.Option;
class User extends Component {
	getState(state){
		return {
			'1':'咸鱼',
			'2':'浪子',
			'3':'才子',
			'4':'高手',
			'5':'创业者'
		}[state];
	}
	formRef = React.createRef();
	state = {
		list: [],
		isVisible: false,
		userInfo: {}
	}
	params = {}
	formList = [
		{
			type: 'INPUT',
			label: '用户名',
			field: 'user_name',
			placeholder: '请输入用户名',
			width: 100
		},
		{
			type: 'INPUT',
			label: '手机号',
			field: 'user_mobile',
			placeholder: '请输入手机号',
			width: 100
		},
		{
			type: 'DATA',
			label: '请选择入职日期',
			field: 'user_date',
			placeholder: '请选择日期'
		}
	]
	
	handleFilter = (params) => {
		console.log(params)
		this.params = params;
		this.requestList();
	}
	componentDidMount(){
		this.requestList()
	}
	requestList = () => {
		Iaxios.requestList(this, '/user', this.params, true)
	}
	onSelectChange = (selectedRowKeys, selectedRows) => {
	    this.setState({ selectedItem: selectedRows });
	};
	handleOperate = (type) => {
		let item = this.state.selectedItem;//编辑时判断有没有先选中
		console.log(item)
		if(type === 'create'){
			this.setState({
				type,
				isVisible: true,
				title: '创建员工'
			})
		}else if(type === 'edit'){
			if(!item){
				Modal.info({
					title: '提示',
					content: '请选择一个用户'
				})
				return;
			}
			this.setState({
				type,
				isVisible: true,
				title: '编辑员工',
				userInfo: item[0]
			})
			//赋值赋失败
			
		}else if(type === 'detail'){
			if(!item){
				Modal.info({
					title: '提示',
					content: '请选择一个用户'
				})
				return;
			}
			this.setState({
				type,
				isVisible: true,
				title: '员工详情',
				userInfo: item[0]
			})
		}else{
			if(!item){
				Modal.info({
					title: '提示',
					content: '请选择一个用户'
				})
				return;
			}
			Modal.confirm({
				title: `确认删除${item[0].username}？`,
				onOk:()=>{
					//ajax请求
					message.success('删除成功')
					this.requestList()
				}
			})
		}
	}
	
	onFinish = values => {
		console.log(values);
	}
	onFill = () => {
		console.log(111);
		this.formRef.current.setFieldsValue({
			username: this.state.userInfo.username,
			sex: this.state.userInfo.sex,
			state: this.state.userInfo.state,
			birthday: moment(this.state.userInfo.birthday),
			address: this.state.userInfo.address,
		})
	}
	handleSubmit = () => {
		//let item = this.state.selectedItem;
		//let type = this.state.type;
		this.formRef.current.resetFields();
		this.setState({
			isVisible: false
		})
		//请求接口 Iaxios.ajax()
	}
	render(){
		const columns = [
			{
				title: 'id',
				dataIndex: 'id'
			},
			{
				title: '用户名',
				dataIndex: 'username'
			},
			{
				title: '性别',
				dataIndex: 'sex',
				render: sex=>{
					return sex === 1? "男":"女";	
				}
			},
			{
				title: '状态',
				dataIndex: 'state',
				render: state=>{
					return {
						'1':'咸鱼',
						'2':'浪子',
						'3':'才子',
						'4':'高手',
						'5':'创业者'
					}[state];
				}
			},
			{
				title: '爱好',
				dataIndex: 'interes',
				render: interes=>{
					return {
						'1':'游泳',
						'2':'爬山',
						'3':'旅游',
						'4':'跑步',
						'5':'踢球',
						'6':'桌球',
						'7':'游戏',
						'8':'电影'
					}[interes];
				}
			},
			{
				title: '生日',
				dataIndex: 'birthday'
			},
			{
				title: '联系地址',
				dataIndex: 'address'
			},
			{
				title: '早起时间',
				dataIndex: 'time'
			}
		]
		const rowSelection = {
			type: 'radio',
			onChange: this.onSelectChange
		}
		const layout = {
			labelCol: {
				span: 6,
			},
			wrapperCol: {
				span: 12,
			},
		};
		const { type, userInfo } = this.state;
		let footer = {};
		if(type === "detail"){
			footer={
				footer: null
			}
		}
		return(
			<Fragment>
				<Card>
					<BaseForm formList={this.formList} filterSubmit={this.handleFilter} />
				</Card>
				<Card className="operate-wrap">
					<Button type="primary" onClick={()=>this.handleOperate('create')}>创建员工</Button>
					<Button type="primary" onClick={()=>this.handleOperate('edit')}>编辑员工</Button>
					<Button type="primary" onClick={()=>this.handleOperate('detail')}>员工详情</Button>
					<Button type="primary" onClick={()=>this.handleOperate('delete')}>删除员工</Button>
				</Card>
				<div className="content-wrap" style={{width: '100%'}}>
					<Table
						columns = { columns }
						dataSource = { this.state.list }
						rowSelection={rowSelection}
					/>
				</div>
				<Modal
					title={this.state.title}
					visible={this.state.isVisible}
					onOk={this.handleSubmit}
					onCancel={()=>{this.setState({isVisible: false})}}
					width={500}
					{...footer}
				>
					<Form
						{...layout}
						ref={this.formRef}
						onFinish={this.onFinish}
						initialValues={{
							initialValue: this.state.userInfo.username,
							sex: this.state.userInfo.sex,
							state: this.state.userInfo.state,
							birthday: moment(this.state.userInfo.birthday),
							address: this.state.userInfo.address,
						}}
					>
						{
							type === 'detail'? 
							<FormItem label="用户名">
								{userInfo.username}
							</FormItem>:
							<FormItem name="username" label="用户名">
								<Input placeholder="user" />
							</FormItem>
						}
						{
							type === 'detail'? 
							<FormItem label="性别">
								{userInfo.sex=== 1? "男":"女"}
							</FormItem>:
							<FormItem name="sex" label="性别">
								<Radio.Group>
								    <Radio value={1}>男</Radio>
								    <Radio value={2}>女</Radio>
								</Radio.Group>
							</FormItem>
						}
						{
							type === 'detail'?
							<FormItem label="状态">
								{this.getState(userInfo.state)}
							</FormItem>:
							<FormItem name="state" label="状态">
								<Select
									placeholder="请选择"
								>
									<Option value={1}>咸鱼</Option>
									<Option value={2}>浪子</Option>
									<Option value={3}>才子</Option>
									<Option value={4}>高手</Option>
									<Option value={5}>创业者</Option>
								</Select>
							</FormItem>
						}
						{
							type === 'detail'?
							<FormItem label="联系地址">
								{userInfo.address}
							</FormItem>:
							<FormItem name="address" label="联系地址">
								<TextArea rows={3} />
							</FormItem>
						}
						{
							type === 'detail'?
							<FormItem label="生日">
								{userInfo.birthday}
							</FormItem>:
							<FormItem name="birthday" label="生日">
								<DatePicker />
							</FormItem>
						}
						{
							type === 'detail'?"":
							<FormItem>
								<Button type="link" htmlType="button" onClick={this.onFill} >赋值</Button>
							</FormItem>
						}
					</Form>
				</Modal>
			</Fragment>
		)
	}
}

export default User;